<!--
 * @Description: 
 * @Date: 2024-07-05 10:52:50
 * @LastEditTime: 2024-08-12 08:44:32
-->
<script setup lang="ts">
import { formatTime } from '@/utils'
import addPhotoAlbum from './addPhotoAlbum.vue'
import uploadPhoto from './uploadPhoto.vue'
import * as albumphoto from '@/api/spb/partyWorkAlbum/index'
import { ElMessageBox } from 'element-plus'
const message = useMessage()
const { t } = useI18n()
const addPhoto = ref()
const upPhoto = ref()
const albumList = ref<any[]>([])
const photoList = ref<any[]>([])
const total = ref(0) // 数据列表
let showAlbum = ref<any>(null)
let basePath = import.meta.env.VITE_API_BASEPATH
let baseUrl = import.meta.env.VITE_BASE_URL
// 查询参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 12
})

onMounted(() => {
  getList()
})

/**
 * @description: 相册初始化
 * @return {*}
 */
const getList = async () => {
  let data = await albumphoto.getAlbumPage({ pageNo: 1 })
  albumList.value = data.list
  if (!showAlbum.value) showAlbum.value = albumList.value[0].id
  getPhotoList()
}
/**
 * @description: 图片初始化
 * @return {*}
 */
const getPhotoList = async () => {
  console.log()
  let data = await albumphoto.getPhotoPage({
    ...toRaw(queryParams),
    albumId: showAlbum.value
  })
  photoList.value = data.list
  total.value = data.total
}
/**
 * @description: 新建/修改相册
 * @param {*} title
 * @param {*} id
 * @return {*}
 */
const openPhoto = (title, id?: number) => {
  addPhoto.value.open(title, id)
}
/**
 * @description: 添加图片
 * @return {*}
 */
const openUpPhoto = () => {
  upPhoto.value.open()
}
/**
 * @description: 删除相册
 * @param {*} id
 * @return {*}
 */
const deletePAlbum = async (id) => {
  ElMessageBox.confirm('确认删除当前相册吗？删除该相册会删除其下的所有照片，请谨慎操作，请谨慎操作', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await albumphoto.deleteAlbum(id)
      message.success(t('common.delSuccess'))
      getList()
    })
    .catch(() => {})
}
/**
 * @description: 删除图片
 * @param {*} id
 * @return {*}
 */
const deletePhoto = async (id) => {
  let deleteArr = photoList.value.filter((item: any) => item.checked).map((item) => item.id)

  if (deleteArr.length == 0) {
    message.error('请选择照片')
  } else {
    await albumphoto.deletePhotos({ ids: deleteArr })
    message.success('删除成功')
    getPhotoList()
  }
}
const deletePhotoIs = async (id) => {
  await albumphoto.deletePhoto(id)
  message.success('删除成功')
  getPhotoList()
}
/**
 * @description: 图片置顶
 * @return {*}
 */
/**
 * @description: 图片置顶
 * @return {*}
 */
const handleTop = async (id) => {
  await albumphoto.updatePhoto(id)
  getPhotoList()
  message.success('置顶成功')
}
/**
 * @description: 图片下载
 * @param {*} url
 * @return {*}
 */
const handleDownload = (url: string) => {
  window.open(url, '_blank')
}
const changAlbum = (id) => {
  showAlbum.value = id
  getList()
}
</script>

<template>
  <div class="albumphoto w-100% flex flex-col box-border overflow-hidden">
    <div class="pb-20px">
      <!-- <el-button type="warning" @click="openUpPhoto">上传照片</el-button>
      <el-button type="warning" @click="deletePhoto">批量删除</el-button> -->
      <el-button
        link
        type="primary"
        @click="openUpPhoto"
        class="btnhover"
        style="width: 90px; height: 30px; background-color: #ff9900; color: rgba(255, 255, 255, 1)"
        >上传照片</el-button
      >
      <el-button
        link
        type="primary"
        @click="deletePhoto"
        class="btnhover"
        style="width: 90px; height: 30px; background-color: #ff9900; color: rgba(255, 255, 255, 1)"
        >批量删除</el-button
      >
    </div>
    <el-row class="w-100% flex-1 overflow-hidden box-border">
      <el-col :xs="24" :sm="8" :md="8" :lg="4" :xl="4" class="">
        <div
          class="w-100% flex flex-col border-solid border-2px box-border border-#E4E4E4 mb-20px bg-#fff"
        >
          <div
            class="flex justify-between py-15px px-15px border-b-solid border-b-2px border-b-#E4E4E4"
          >
            <span class="font-bold text-14px">相册</span>
            <Icon
              icon="ep:plus"
              class="mr-5px"
              color="#CC352F"
              :size="15"
              @click="openPhoto('新增相册')"
            />
          </div>
          <div class="w-100% flex-1 box-border py-10px">
            <div
              v-for="(item, index) in albumList"
              :key="index"
              :class="{ showAlbum: item.id == showAlbum }"
              class="flex items-center justify-between px-20px py-10px box-border cursor-pointer pos-relative"
            >
              <span class="text-14px font-500" @click="changAlbum(item.id)">{{ item.name }}</span>
              <div class="flex items-center">
                <Icon
                  icon="ep:edit"
                  class="mr-10px"
                  color="#CC352F "
                  :size="13"
                  @click="openPhoto('修改相册', item.id)"
                />
                <Icon icon="ep:delete" color="#CC352F" :size="15" @click="deletePAlbum(item.id)" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="16" :md="16" :lg="20" :xl="20" class="h-100%">
        <div class="w-100% h-100% flex flex-col pl-40px">
          <div class="w-100% flex-1 pr-10px box-border imgList" v-if="photoList.length > 0">
            <el-row :gutter="20">
              <el-col
                :xs="12"
                :sm="12"
                :md="8"
                :lg="6"
                :xl="6"
                v-for="item in photoList"
                :key="item.id"
              >
                <div class="w-100% pos-relative">
                  <img :src="item.url" class="w-100% h-200px" />
                  <div class="flex flex-wrap gap-10px py-5px">
                    <span class="text-14px">{{ item.name }}</span>
                    <span class="text-14px">{{
                      formatTime(item.createTime, 'yyyy-MM-dd HH:mm:ss')
                    }}</span>

                    <span
                      class="text-#3C88F0 cursor-pointer text-12px"
                      @click="handleDownload(item.url)"
                      >下载</span
                    >
                    <span
                      class="text-#3C88F0 cursor-pointer text-12px"
                      @click="deletePhotoIs(item.id)"
                      >删除</span
                    >
                    <span class="text-#3C88F0 cursor-pointer text-12px" @click="handleTop(item.id)"
                      >置顶</span
                    >
                  </div>
                  <div class="pos-absolute top-0 left-10px">
                    <el-checkbox v-model="item.checked" size="large" />
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>

          <el-empty description="暂无数据" v-else />

          <div class="w-100% h-50px flex justify-center items-center">
            <Pagination
              :total="total"
              v-model:page="queryParams.pageNo"
              v-model:limit="queryParams.pageSize"
              :page-sizes="[12, 20, 30, 40]"
              @pagination="getPhotoList"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <addPhotoAlbum ref="addPhoto" @success="getList" />
  <uploadPhoto ref="upPhoto" @success="getList" />
</template>

<style scoped lang="scss">
.albumphoto {
  min-height: calc(
    100vh - 10px - var(--app-content-padding) - var(--app-content-padding) - var(
        --app-footer-height
      ) - var(--top-tool-height) - var(--tags-view-height)
  );
}

.showAlbum {
  color: #cc352f;
}

.showAlbum::after {
  content: '';
  width: 3px;
  height: 100%;
  background: #cc352f;
  position: absolute;
  top: 0;
  right: -2px;
}

:deep(.el-checkbox__inner::after) {
  height: 10px;
  left: 6px;
  top: 2px;
  width: 5px;
}

:deep(.el-checkbox.el-checkbox--large .el-checkbox__inner) {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.btnhover:hover {
  opacity: 0.8;
}

// :deep (.v-layout-content-scrollbar.el-scrollbar__wrap) {
//   overflow-y: hidden !important;
// }

// :deep (.v-layout-content-scrollbar.el-scrollbar__bar.is-horizontal) {
//   height: 0 !important;
// }
</style>
